<template>
	<div class="app-container">
		<el-main>
			<div class="search">
				<el-form ref="searchForm" :inline="true" :model="searchForm" class="form-inline" size="mini">
					<el-form-item label="安装工名称：" prop="name">
						<el-input clearable v-model.trim="searchForm.name" placeholder="请输入安装工名称" />
					</el-form-item>
					<el-form-item label="手机" prop="phone">
						<el-input clearable v-model.trim="searchForm.phone" placeholder="请输入手机号" />
					</el-form-item>
					<el-form-item>
						<el-button type="primary" plain @click="searchSubmit('searchForm')">搜索</el-button>
						<el-button type="info" plain @click="searchReset">重置</el-button>
					</el-form-item>
				</el-form>
			</div>

			<el-row :gutter="20" type="flex" align="center">
				<el-col>
					<el-button type="primary" size="mini" @click.native="showAdd()" v-permission="'worker_add'">新增</el-button>
				</el-col>
			</el-row>

			<el-table stripe ref="multipleTable" :data="tableData" tooltip-effect="dark" v-loading="tabLoading" style="width: 100%"
			 :row-class-name="tableRowClassName" border :default-sort="{prop: 'date', order: 'descending'}"
			 highlight-current-row @selection-change="handleSelectionChange" row-key="id" size="mini">
				<el-table-column type="index" label="序号" width="50">
					<template slot-scope="scope">
						<span>{{(listParams.page - 1) * listParams.page_size + scope.$index + 1}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="real_name" label="安装工名称"  show-overflow-tooltip></el-table-column>
				<el-table-column prop="phone" label="手机号" show-overflow-tooltip></el-table-column>
				<el-table-column prop="sort" label="排序" width="80" show-overflow-tooltip sortable fixed="right" />
				<el-table-column label="操作" width="350px" align="center" fixed="right">
					<template slot-scope="scope">
						<div class="operation">
							<el-button type="primary" icon="el-icon-edit-outline" size="mini" @click.native="showEdit(scope.row)" v-permission="'worker_edit'"
							>编辑</el-button>
							<el-button type="danger" icon="el-icon-delete" size="mini" @click.native="delVer(scope.row.id);" v-permission="'worker_delete'">删除</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>

			<!-- 分页数据 -->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="current"
			 :page-sizes="[10, 20, 50, 100, 200, 500]" :page-size="listParams.page_size" layout="total, sizes, prev, pager, next, jumper"
			 :total="total"></el-pagination>
		</el-main>

		

		<el-dialog :close-on-click-modal="false" :title="(cuFormTwo.id?'编辑':'新增')" center :visible.sync="dialogCUTwo" width="40%"
		 @close="dialogCUClose('cuFormTwo')">
			<el-form ref="cuFormTwo" v-loading="dialogCULoadingTwo" :rules="cuRulesTwo" :model="cuFormTwo" label-width="120px"
			 center>
				<el-row class="row-bg">
		
						<el-form-item label="安装工名称" prop="real_name">
							<el-col :span="24">
								<el-input clearable v-model.trim="cuFormTwo.real_name" placeholder="请输入安装工名称" />
							</el-col>
						</el-form-item>
						
						
						<el-form-item label="手机" prop="phone">
							<el-col :span="24">
								<el-input clearable v-model.trim="cuFormTwo.phone" placeholder="请输入手机" :disabled="cuFormTwo.id!=null"/>
							</el-col>
						</el-form-item>
					
						
						<el-form-item label="排序" prop="sort">
							<el-col :span="24">
								<el-input v-model.trim="cuFormTwo.sort" type="number" placeholder="请输入排序" />
							</el-col>
						</el-form-item>
						
					
				</el-row>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click.native="dialogCUTwo=false">取 消</el-button>
				<el-button type="primary" @click.native="onSubmit(cuFormTwo.id)">确 定</el-button>
			</span>
		</el-dialog> 
		<!-- <transition
			mode="out-in"
			@before-enter="beforeEnter"
			@enter="enter"
		
			@before-leave="beforeLeave"
			@leave="leave"
			:css="false">
		
		</transition> -->
		

		

	</div>
</template>

<script>
	import {
		list,
	
		add,
		edit,
		del
	} from '@/api/system/worker.js'
	import {
		Message
	} from 'element-ui'
	import {
		cloneDeep
	} from 'lodash'

	const reg_mobile = /^1(3|4|5|6|7|8|9)\d{9}$/,
		reg_email = /^[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?$/;

	export default {
		data() {
			var validateMobile = (rule, value, callback) => {
				if (!value) {
					callback(new Error("请输入手机号"));
				} else if (!reg_mobile.test(value)) {
					callback(new Error("请输入正确的手机号"));
				} else {
					callback();
				}
			};

			var validateEmail = (rule, value, callback) => {
				if (!value) {
					callback();
				} else if (!reg_email.test(value)) {
					callback(new Error("请输入正确的邮箱"));
				} else {
					callback();
				}
			};
			return {
				// search form
				searchForm: {
					name: null,
					phone: null
					
				},
				// page option
				total: null, // 总页数
				current: 1, // 当前页

				// list table
				tableData: [], // 列表数据
				selectIds: [], // 多选选项id

				listParams: {
					name: null,
					phone: null,
					
					page: 1,
					page_size: 10
				}, // list参数
				tabLoading: true,

				// CU dialog
				dialogCULoading: false,
				dialogCU: false, // 增修弹框显示
				cuForm: {
					id: null,
					real_name: null,
					
					phone: null
				},
				cuRules: {
					real_name: [{
						required: true,
						message: '请输入安装工名称',
						trigger: 'blur'
					}],
				
					phone: [{
						required: true,
						validator: validateMobile,
						trigger: 'blur'
					}],
				},

				// CU dialog two
				dialogCULoadingTwo: false,
				dialogCUTwo: false, // 增修弹框显示
				cuFormTwo: {
					id: null,
					real_name: null,
					
					phone: null
				},
				cuRulesTwo: {
					real_name: [{
						required: true,
						message: '请输入安装工名称',
						trigger: 'blur'
					}],
					
					phone: [{
						required: true,
						validator: validateMobile,
						trigger: 'blur'
					}],
				},

				roleList: [],
			
				// CU dialog
				dialogCULoadingThree: false,
				dialogCUThree: false, // 增修弹框显示
				cuFormThree: {
					department_list:[]
				},
			}
		},
		computed: {},
		created() {
			this.getList()

		},
		mounted: function() {},
		methods: {
			
			// 新增弹出框
			showAdd() {
				this.dialogCUTwo = true
				this.dialogCULoadingTwo = false
				this.resetFormTwo()
				this.$refs['cuFormTwo'] && this.$refs['cuFormTwo'].resetFields()
			},
			// 编辑弹出框
			showEdit(row) {
				this.cuFormTwo = Object.assign({}, row)
				
				this.dialogCUTwo = true
				this.dialogCULoadingTwo = false
			},
			
			// 关闭弹窗
			dialogCUClose(formName) {
				switch (formName) {
					case 'cuForm':
						this.$refs['cuForm'].clearValidate()
						this.resetForm()
						break
					case 'cuFormTwo':
						this.$refs['cuFormTwo'].clearValidate()
						this.resetFormTwo()
						break
					case 'cuFormThree':
						this.resetFormThree()
						break
				}
			},

			resetForm() {
				this.cuForm = {
					name: null,
					phone: null
				}
			},
			resetFormTwo() {
				this.cuFormTwo = {
					id: null,
					real_name: null,
					contact_name: null,
					phone: null,
					remark: null
				}
			},
			resetFormThree(){
				this.cuFormThree = {
					department_list: []
				}
			},
			// 提交数据 设置角色
			onSubmitSetRole(id) {
				// 表单校验
				this.$refs.cuForm.validate(valid => {
					// ~ 校验通过
					if (valid) {
						var obj = Object.assign({}, this.cuForm)

						// 显示loading
						this.dialogCULoading = true;

				
					} else {
						// ~ 不通过
						return false;
					}
				});
			},
			// 提交数据 增、改
			onSubmit(id) {
				// 表单校验
				this.$refs.cuFormTwo.validate(valid => {
					// ~ 校验通过
					if (valid) {
						var obj = Object.assign({}, this.cuFormTwo)

						// 显示loading
						this.dialogCULoadingTwo = true;
						
						

						// ~~ 修改
						if (id) {
							this.onEdit(obj);
						} else {
							// ~~ 添加
							delete obj.id
							this.onAdd(obj);
						}
					} else {
						// ~ 不通过
						return false;
					}
				});
			},

			

			// 添加
			onAdd(obj) {
				return add(obj)
					.then(res => {
						const {
							code,
							message
						} = res
						if (code === 200) {
							Message({
								message,
								type: 'success',
								duration: 1000
							})
							this.dialogCUTwo = false
							this.getList()
						}
						this.dialogCULoadingTwo = false
					})
					.catch(() => {
						this.dialogCULoadingTwo = false
					})
			},

			// 编辑
			onEdit(obj) {
				return edit(obj)
					.then(res => {
						const {
							code,
							message
						} = res
						if (code === 200) {
							Message({
								message,
								type: 'success',
								duration: 1000
							})
							this.dialogCUTwo = false
							this.getList()
						}
						this.dialogCULoadingTwo = false
					})
					.catch(() => {
						this.dialogCULoadingTwo = false
					})
			},
			// 删除
			delVer(id = false) {
				this.$confirm('确认要删除?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning',
						dangerouslyUseHTMLString: true
					})
					.then(() => {
						let ids = id ? [id] : this.selectIds;
						del(ids).then(res => {
							let {
								code,
								date,
								message
							} = res;
							this.getList();
							Message({
								message,
								type: "success",
								duration: 1000
							});
						});
					}).catch()
			},
			// 获得table列表
			getList() {
				this.tabLoading = true
				return list(this.listParams)
					.then(res => {
						let {
							data: {
								records,
								total
							}
						} = res;
						this.tableData = records.map(item => {
						
							return item
						});
						this.total = total;
						this.tabLoading = false;
					})
					.catch(() => {
						this.tabLoading = false
					})
			},
			// 重置搜索表单
			searchReset() {
				this.$refs.searchForm.resetFields()
				const params = this.$refs.searchForm.model
				this.listParams = Object.assign(this.listParams, params)
				this.getList()
			},
			// 搜索
			searchSubmit(formName) {
				this.$refs[formName].validate(valid => {
					if (valid) {
						const params = this.$refs[formName].model
						if (!params.name) params.name = null
						this.listParams.page = 1
						this.current = 1
						this.listParams = Object.assign(this.listParams, params)
						this.getList()
					} else {
						console.log('error submit!!')
						return false
					}
				})
			},
			// 移除
			deleteRow(index, rows) {
			  rows.splice(index, 1);
			},

			// 表单多选
			handleSelectionChange(val) {
				this.selectIds = val.map(item => item.id)
			},
			// 分页 -pageSize改变
			handleSizeChange(val) {
				this.listParams.page_size = val
				this.getList()
			},
			// 分页 -pageNum改变
			handleCurrentChange(val) {
				this.listParams.page = val
				this.getList()
			},
			//带状态表格
			tableRowClassName({
				row
			}) {
				if (row.is_joined === 0) {
					return "stop-row";
				}
				return "";
			},
		}
	}
</script>
<style>
	.search .el-form-item:last-child {
		margin-left: 35px;
	}

	.el-date-editor>.el-range-separator {
		width: 8% !important;
	}

	.operation button {
		padding: 8px;
	}

	.el-pagination {
		margin-top: 40px;
	}
</style>
<style lang="scss" scoped>
	.app-container {
		.el-table {
			margin-top: 20px;

			.names-tag {
				box-sizing: border-box;
				margin: 3px;
			}
			
			/deep/.stop-row{
				color: #bbb !important;
			}
		}
	}
</style>
